@charset "utf-8";
@import "reset";
@import "grid";
@import "button";
@import "table";
@import "form";

// margin start
// margin
.m(@class, @val) {
    .m-@{class} {
        margin: @val;
    }
}
.m(10, 10px);
.m(15, 15px);
.m(30, 30px);

// margin-top
.mt(@class, @val) {
    .mt-@{class} {
        margin-top: @val;
    }
}
.mt(10, 10px);
.mt(15, 15px);
.mt(30, 30px);

// margin-right
.mr(@class, @val) {
    .mr-@{class} {
        margin-right: @val;
    }
}
.mr(auto, auto);
.mr(10, 10px);
.mr(15, 15px);
.mr(30, 30px);

// margin-bottom
.mb(@class, @val) {
    .mb-@{class} {
        margin-bottom: @val;
    }
}
.mb(10, 10px);
.mb(15, 15px);
.mb(30, 30px);

// margin-left
.ml(@class, @val) {
    .ml-@{class} {
        margin-left: @val;
    }
}
.ml(auto, auto);
.ml(10, 10px);
.ml(15, 15px);
.ml(30, 30px);
// margin end

// padding start
// padding
.p(@class, @val) {
    .p-@{class} {
        padding: @val;
    }
}
.p(10, 10px);
.p(15, 15px);
.p(30, 30px);

// padding top
.pt(@class, @val) {
    .pt-@{class} {
        padding-top: @val;
    }
}
.pt(10, 10px);
.pt(15, 15px);
.pt(30, 30px);

// padding right
.pr(@class, @val) {
    .pr-@{class} {
        padding-right: @val;
    }
}
.pr(10, 10px);
.pr(15, 15px);
.pr(30, 30px);

// padding bottom
.pb(@class, @val) {
    .pb-@{class} {
        padding-bottom: @val;
    }
}
.pb(10, 10px);
.pb(15, 15px);
.pb(30, 30px);

// padding left
.pl(@class, @val) {
    .pl-@{class} {
        padding-left: @val;
    }
}
.pl(10, 10px);
.pl(15, 15px);
.pl(30, 30px);
// padding end
